<template>
  <div class="paper tableF">
    <div >
      <div class="selectCondition">
        <slot></slot>

      </div>
      <div class="operation">
        <div><button>批量删除</button></div>
        <div><button>添加</button></div>
      </div>
      <table>
        <thead><td><input type="checkbox"  value="#f0544d"/></td><td v-for="item in head">{{item}}</td><td>操作</td></thead>
        <tbody>
        <tr v-for="value in TableContent">
          <td><input type="checkbox" class="selectId" value="#f0544d"></td>
          <td v-for="info in value">{{info}}</td>
          <td class="operaTb"><div><img src="../../public/img/编辑.png"  @click="update(value.id)"></div><div ><img src="../../public/img/删除.png" @click="Bdelete(value.id)"></div></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="block">
      <el-pagination
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :page-size="5"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
name: "BlogTable",
  props:['TableHead','content','TableUpdate','total','select','Delete'],
  data(){
  return {
         head:this.TableHead,
         currentPage:1, // 当前页数
         TableContent:this.content,
         Fupdate:this.TableUpdate,
   }
  },
  methods:{
    handleCurrentChange(val){
      this.currentPage = val
      if(this.select  == '') {
        this.$emit('page', val)
      }else{
        this.$emit('pagin', val)
      }
    },
    Bdelete(id){
              const request =  this.myCode();
              const  config = {
                   method:'get',
                   url:this.Delete,
                   params:{
                     id:id
                   }
              }
              request(config).then(res=>{
                    if(res.data.status == 200){
                            this.handleCurrentChange(this.currentPage);
                    }
              })
    },
           update(id){
              if(this.Fupdate == 1){
                const {href} =   this.$router.resolve({name:'BlogUpdate',query:{
                    'id':id
                  }})
                window.open(href, '_blank');
              }
           }
  },
  watch:{
     content(val){
          this.TableContent = val;
     },
    select(val){
       this.select = val
    }
  }

}
</script>

<style scoped  lang="scss">
.tableF{
  padding-top: 10px;
  padding-bottom: 30px;
  background-color: white;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
table{
  width: 98%;
  border-collapse:collapse;
  margin: 0 auto;
  thead{
    td{
      box-sizing: border-box;
      padding-left: 10px;
      background-color: #f2f2f2;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 13px;
      border:1px solid #e6e6e6;;
      color: #666;
    }
  }
  tbody{
    td{
      padding-left: 10px;
      box-sizing: border-box;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 13px;
      border:1px solid #e6e6e6;
      color: #666;
    }
  }
  .selectId{
    border-color: #c2c2c2;
    color:#c2c2c2;
  }
}
.operation{
  width: 98%;
  margin: 0 auto;
  display: flex;
  padding-bottom: 20px;
  >div{
    button{
      height: 30px;
      padding-left: 15px;
      padding-right: 15px;
      border: none;
      color: white;
      cursor: pointer;
      font-size: 13px;
    }
  }
  >div:nth-child(1){
    button{
      background-color: #ff5722;
    }
  }
  >div:nth-child(2){
    margin-left: 10px;
    button{
      background-color: #009688;
    }
  }
}
.selectCondition{
  display: flex;
  padding-bottom: 15px;
  width: 98%;
  margin: 0 auto;
  >div select{
    width: 150px;
    height: 30px;
    border: 1px solid #D2D2D2;
    color: #666;
    font-size: 13px;
    padding-left: 5px;
  }
  >div input{
    margin-left: 10px;
    box-sizing: border-box;
    @extend select;
  }
}
.selectIcon{
  cursor: pointer;
  margin-left: 10px;
  background-color: #009688;
  border-radius: 3px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 20px;
  }
}
input[type="checkbox"]{
  -webkit-appearance: none;
  vertical-align:middle;
  margin-top:0;
  background:#fff;
  border:#999 solid 1px;
  border-radius: 3px;
  min-height: 15px;
  min-width: 15px;
  position: relative;
}
input[type="checkbox"]:checked {
  background: #5FB878;
}
input[type=checkbox]:checked::after{
  content: "\2713";
  top: 0px;
  left: 3px;
  position: absolute;
  border-top: none;
  border-right: none;
  font-size: 10px;
  color: white;
  height: 6px;
  width: 10px;
}
.operaTb{
  display: flex;
  >div{
    cursor: pointer;
    img{
      width: 15px;
    }
  }
  >div:nth-child(2){
    margin-left: 15px;
  }
}
.linkButton{
  padding-left: 1%;
  margin-top: 20px;
  span {
    input {
      margin-left: 10px;
      margin-right: 10px;
      padding-left: 15px;
      width: 50px;
      height: 30px;
      box-sizing: border-box;
    }
  }
  .linkJump{
    margin-left: 10px;
    font-size: 13px;
  }
}
.linkDete{
  margin-left: 10px;
  height: 30px;
  width:40px;
  margin-right: 10px;
  background-color: white;
  border: 1px solid silver;
  cursor: pointer;
}
.cursor{
  padding-right: 5px;
  padding-left: 5px;
  font-size: 20px;
  color: grey;
  font-weight: bold;
  cursor: pointer;


}
.Linkbutton{
  box-sizing: border-box;
  width: 40px;
  height: 30px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid silver;
  border-radius: 4px;
  cursor: pointer;
}
.linkInfo{
  font-size: 13px;
  margin-left: 5px;
}
</style>